<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
<head>
    <style>
        body {
            background-image: url("5.jpg");
            background-repeat: no-repeat;
            background-position: 50% 0%;
            background-attachment: fixed;
            text-align: top;
            background-size: cover;
            border: 2px solid rgb(7, 77, 206);
            border-radius: 12px;
        }
        
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
        
        .cities {
            background-color: black;
            color: white;
            margin: 20px;
            padding: 20px;
        }
        
        h1 {
            color: rgb(17, 219, 226);
            text-align: center;
        }
        
        p {
            color: rgb(34, 20, 224);
            font-family: verdana;
            text-align: center;
            font-size: 20px;
        }
        
        img {
            text-align: left;
            border-radius: 20px;
        }
        
        * {
            box-sizing: border-box;
        }
        
        .topnav {
            overflow: hidden;
            background-color: #333;
        }
        /* 设置 topnav 链接的样式 */
        
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /* 改变鼠标悬停时的颜色 */
        
        .column {
            float: left;
            padding: 10px;
        }
        /* 左和右列 */
        
        .column.side {
            width: 25%;
        }
        /* 中间列 */
        
        .column.middle {
            width: 50%;
        }
        
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }
        
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
        /* 响应式布局 - 创建堆叠而非并排的三列 */
        
        @media screen and (max-width:600px) {
            .column {
                width: 100%;
            }
        }
        
        div.gallery {
            margin: 5px;
            border: 1px solid #ccc;
            float: left;
            width: 180px;
        }
        
        div.gallery:hover {
            border: 1px solid #777;
        }
        
        div.gallery img {
            width: 100%;
            height: auto;
        }
        
        div.desc {
            padding: 15px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="header">
        <h1>小倪同学的个人主页</h1>
        <div class="topnav">
            <a href="404.html" target="_blank">个人简历</a>
            <a href="https://blog.csdn.net/qq_56663697?spm=1010.2135.3001.5343" target="_blank">CSDN博客</a>           
            <a href="https://gitee.com/NZB305" target="_blank">码云</a>
            <a href="cal.html" target="_blank">计算器</a>
        </div>
    </div>
</body>

</html>